<template>
	<view class="page cp" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="文化场馆" backUrl="/pages/index/index"></c-nav-bar>
		<image class="bg_img" :src="topBgImg.path" @tap="toLbDetails(topBgImg.route)"></image>
		<view class="search s_culturalTour">
			<!-- <image src="https://i.ringzle.com/file/20231116/f9267f906e164b54aa1bf9a38a33aab6.png"></image>
			<input type="text" placeholder="请输入搜索关键词" placeholder-style="color:#fff" v-model="keyword"   @search="toSearch"> -->
		</view>
		<view class="tabs">
			<view @tap="changeTab(101)">
				<image src="https://i.ringzle.com/file/20231116/23a2c30cf2f24b24be92225dc23f3a4b.png"></image>
				<text>博物馆</text>
			</view>
			<view @tap="changeTab(102)">
				<image src="https://i.ringzle.com/file/20231116/4582c4da4c4649eb91cab9f36b092faf.png"></image>
				<text>文化馆</text>
			</view>
			<view @tap="changeTab(103)">
				<image src="https://i.ringzle.com/file/20231116/132b84c41a59469c8b7f00fdce29909e.png"></image>
				<text>图书馆</text>
			</view>
		</view>
		<view class="list">
			<block v-if="list.length>0">
				<view v-for="(item,index) in list" :key="index" @tap.prevent="toDetails(item)">
					<image class="l_bg" :src="item.appearancePic"></image>
					<view class="l_item">
						<view class="li_title">{{item.name}}</view>
						<view class="li_note">{{item.venuesDescribe}}</view>
						<view class="li_pre">场馆地址：<text>{{item.address}}</text></view>
						<view class="li_pre">开放时间：<text>{{item.openingHours}}</text></view>
					</view>
					<!-- <image @tap.stop="toCollect(item,index)" class="l_sc" v-if="!item.collect" src="https://i.ringzle.com/file/20231116/dbf3b587e78144af84c11c74cf215a8d.png"></image> -->
					<!-- <image @tap.stop="toCollect(item,index)" class="l_sc" v-else src="https://i.ringzle.com/file/20231116/4ce6680bf4914d2f990f262b4079f640.png"></image> -->
				</view>
			</block>
			<block v-else>
				<NoData />
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				type: 1,
				myvenuesType: '101',
				keyword: '',
				list: [],
				mnList: [],
				lbList: [],
				topBgImg: {
					path:'https://fsy.shengsi.gov.cn/file/20240730/780350011f254da7b336f15442e264b8.png',
					route:''
				}
			}
		},
		onLoad() {
			this.getList();
			this.getSwiper()
		},
		methods: {
			toLbDetails(url) {
				if (!url) return
				uni.navigateTo({
					url
				})
			},
			// 获取轮播图数据
			getSwiper() {
				let type = '21'
				this.$api.get(`/sys/isappletpic/queryBannerByType/${type}`).then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}
						})
						if (list.length > 0) this.topBgImg = list[0];
					}
				})
			},



			getList() {
				this.$api.get('/api/culturalVenues/venuesType', {
						venuesType: this.myvenuesType
					})
					.then(res => {
						console.log('111111111111111111', res.data.data)
						this.list = res.data.data;
					})

				// let temp = this.mnList.filter(m=>m.type==this.type);
				// this.list = temp.filter(l=>(l.title.indexOf(this.keyword)>-1||l.note.indexOf(this.keyword)>-1||l.address.indexOf(this.keyword)>-1));
			},
			changeTab(type) {
				this.list = [];
				this.myvenuesType = type;
				this.getList();
			},
			toCollect(item, index) {
				this.$set(this.list[index], 'collect', !this.list[index].collect);
			},
			toDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pagesIndex/culturalTour/details?wenhuaid=' + item.ismapId
				})
			},
			toSearch() {
				console.log('111111111111111111', this.keyword)


			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding-bottom: 30rpx;

		.bg_img {
			width: 100%;
			height: 500rpx;
			position: absolute;
			left: 0;
			z-index: 0;
			margin: 0 0;
		}

		&>view {
			width: calc(100% - 60rpx);
			box-sizing: border-box;
			margin: 0 30rpx;
			position: relative;
		}

		.search {
			height: 80rpx;
			// background: rgba(255, 255, 255,.5);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-top: 312rpx;
			position: relative;
			z-index: 1;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			input {
				border: none;
				outline: none;
				width: calc(100% - 88rpx);
				padding: 0 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
				z-index: 2;
			}
		}

		.tabs {
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 36rpx 0 40rpx;
			margin-top: 35rpx;

			&>view {
				width: calc(100% / 3);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-top: 24rpx;
				}
			}
		}

		.list {
			margin-top: 10rpx;

			&>view {
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
				border-radius: 8rpx;
				position: relative;

				.l_bg {
					width: 100%;
					height: 334rpx;
					border-radius: 8rpx;
				}

				.l_item {
					width: 100%;
					padding: 36rpx 24rpx;
					box-sizing: border-box;

					.li_title {
						font-size: 36rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
					}

					.li_note {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #0065B5;
						margin-top: 24rpx;
					}

					.li_pre {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;

						text {
							color: #333333;
							margin-left: 11rpx;
						}
					}
				}

				.l_sc {
					position: absolute;
					top: 34rpx;
					right: 28rpx;
					width: 38rpx;
					height: 37rpx;
					z-index: 2;
				}
			}
		}
	}
</style>